<template>
  <keep-alive :include="cachedViews">
    <!-- <div :is="currentView"></div> -->
    <div>
      <div class="app-container clearfix pageHeader">
        <div class="header fl">{{$route.meta.title}}</div>
      </div>
      <div class="app-container margin-content padding-content">
        <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-form-item label="申报类型">
            <el-select v-model="form.type" placeholder="请选择申报类型">
              <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="申报时间">
            <el-date-picker v-model="form.daterange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="doSearch">查询</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="app-container margin-content padding-content">
        <ve-pie :data="chartData" :extend="chartExtend" :settings="chartSettings" :legend-visible="false" :tooltip-visible="false" :loading="loading"></ve-pie>
      </div>
    </div>
  </keep-alive>
</template>

<script>
  import {
    getCrossBorderMonitData,
  } from '@/api/declarationMonitor'
  import VePie from 'v-charts/lib/pie.common'
  import 'v-charts/lib/style.css'
  export default {
    name: 'declarationMonitor',
    components: {
      've-pie': VePie,
    },
    data() {
      this.chartExtend = {
        title: {
          text: '跨境申报分析',
          x: 'center',
  
        },
      }
      this.chartSettings = {
        hoverAnimation: false
      }
  
      return {
        options: [{
          name: '海关',
          value: 'CUS'
        }, {
          name: '国检',
          value: 'CIQ'
        }],
        form: {
          daterange: '',
          type: 'CUS'
        },
        scrollHeight: null,
        // chartData: {
        //   columns: ['日期', '访问用户', '下单用户', '下单率'],
        //   rows: [
        //     { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
        //     { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
        //     { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
        //     { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
        //     { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
        //     { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
        //   ]
        // }
        tooltip: false,
        chartData: {
          columns: ['明目', '总量'],
          rows: [{
              '明目': '申报\n清单2000\n订单2000\n运单1920',
              '总量': 0,
            },
            {
              '明目': '回执\n清单1920\n订单1920\n运单1920',
              '总量': 0,
            },
            {
              '明目': '分拣\n入库明细1920\n进区总运单2000\n进场报文3',
              '总量': 0,
            },
            {
              '明目': '查验\n分拣指令查验20\n分拣指令放行20',
              '总量': 0,
            },
          ]
        },
        loading: false
  
        // page: {
        //   pageNum: 1,
        //   pageSize: 20
        // },
        // total: 0,
        // enterpriseName: null,
        // tableKey: 0,
        // listLoading: false,
        // list: [],
        // isShow: false,
        // saveSetTimeoutSearch: null
      }
    },
    computed: {
      // currentView(){
      //   return this.view[this.index]
      // },
      cachedViews() {
        return this.$store.state.tagsView.cachedViews
      }
    },
    methods: {
      // tableResize() {
      //   const _height = 320
      //   this.scrollHeight = document.body.scrollHeight - _height
      //   window.onresize = () => {
      //     this.scrollHeight = document.body.scrollHeight - _height
      //   }
      // },
      getData() {
        let params = {
          declareBeginDate: this.form.daterange ? this.form.daterange[0] : '',
          declareEndDate: this.form.daterange ? this.form.daterange[1] : '',
          declareType: this.form.type
        }
        this.loading = true
        getCrossBorderMonitData(params).then((res) => {
          // console.log(res.data)
          this.loading = false
          if (res.data.code === 200) {
            let _data = res.data.data;
            console.log(_data);
            this.chartData.rows = [{
                '明目': `申报\n清单${_data.declareDetailed}\n订单${_data.declareOrder}\n运单${_data.declareWaybill}`,
                '总量': parseInt(_data.declareDetailed) + parseInt(_data.declareOrder) + parseInt(_data.declareWaybill),
              },
              {
                '明目': `回执\n清单${_data.receiptDetailed}\n订单${_data.receiptOrder}\n运单${_data.receiptWaybill}`,
                '总量': parseInt(_data.receiptDetailed) + parseInt(_data.receiptOrder) + parseInt(_data.receiptWaybill),
              },
              {
                '明目': `分拣\n入库明细${_data.warehousingDetails}\n进区总运单${_data.totalWaybill}\n进场报文${_data.approachMessage}`,
                '总量': parseInt(_data.warehousingDetails) + parseInt(_data.totalWaybill) + parseInt(_data.approachMessage),
              },
              {
                '明目': `查验\n分拣指令查验${_data.inspection}\n分拣指令放行${_data.release}`,
                '总量': parseInt(_data.inspection) + parseInt(_data.release),
              }
            ]
          }
        })
      },
      doSearch() {
        this.getData()
      },
      resetForm() {
        this.form = {
          daterange: '',
          type: '',
        }
      }
    },
    created() {
      this.getData()
    },
  }
</script>
